// $formlineHeight: 38px;
$formlineHeight: 30px;
$themeColor: #5d5def;
$forbiddenColor: #e6493f;
$titleColor: #476c98;
$successColor: #21910b;
$warnColor: #df5e00;
$blueColor: #1e88e5;

body { transform-origin: center; }

a.gui-btn {
    color: #fff;
}
.layui-form-checkbox span {
    max-height: 40px;
}
.layui-form-switch {
    width: auto;
    margin-top: 0;
    margin-left: 5px;
    margin-right: 5px;
}
.layui-form-switch em {
    right: unset;
    vertical-align: super;
    margin-right: 5px;
}
.layui-form-onswitch {
    border-color: $themeColor;
    background-color: $themeColor;
}
.layui-form-onswitch em {
    left: unset;
    vertical-align: super;
    margin-right: 21px;
}
.layui-form-radio > i:hover,
.layui-form-radioed > i {
    color: $themeColor;
}
.layui-form-checked[lay-skin="primary"] i {
    border-color: $themeColor !important;
    background-color: $themeColor;
}
.layui-form-checkbox[lay-skin="primary"]:hover i {
    border-color: $themeColor;
}
.layui-form-select dl {
    z-index: 1000;
}
.layui-form-select dl dd.layui-this {
    background-color: $themeColor;
    color: #fff!important;
}
.layui-form-checkbox[lay-skin="primary"] span {
    padding-left: 5px;
    padding-right: 5px;
}
.layui-form-radio {
    margin-left: 10px;
    white-space: nowrap;
}
.layui-form-checkbox[lay-skin="primary"] {
    margin-left: 10px;
    padding-left: 0;
}

.layui-form-select,
.formline-content input[type="text"],
.formline-content input[type="number"],
.formline-content select,
.formline-content textarea {
    height: $formlineHeight;
}

.gui-btn-cancel,
a.gui-btn-cancel {
    border: 1px solid #ccc;
    background-color: #fff;
    color: #000;

    &:hover {
        border-color: $themeColor;
        background-color: #ecf5ff;
        color: $themeColor;
    }
}

.layui-layer {
    max-height: 100%;
}

.layui-layer-dialog {
    max-width: 520px;
}

.layui-layer-title {
    color: $titleColor;
    font-size: 18px;
    font-weight: bold;
}
.layui-table.layui-table-center {
    th,
    td {
        text-align: center;
    }
}

.layui-layer-btn {
    position: relative;
}
.layui-layer-btn .layui-layer-btn0 {
    border-color: $themeColor;
    background-color: $themeColor;
}
.dangerConfirm .layui-layer-btn0 {
    border-color: $forbiddenColor;
    background-color: $forbiddenColor;
}
.layui-input {
    padding-right: 10px;
    transition: border-color linear 0.3s;
}
.layui-table-edit:focus {
    border-color: $themeColor !important;
}
.layui-layer-prompt .layui-layer-input {
    box-shadow: initial;
    text-align: center;
}
.layui-tab-before {
    float: left;
    position: relative;
    z-index: 1;
    margin-top: 2px;
    padding-right: 20px;
}
.layui-tab-brief > .layui-tab-title li.layui-this {
    color: $themeColor;
}
.layui-tab-brief > .layui-tab-more li.layui-this:after,
.layui-tab-brief > .layui-tab-title .layui-this:after {
    border-bottom-color: $themeColor;
}
.layui-btn {
    // height: 32px;
    min-width: 90px;
    // line-height: 32px;
    border: none;
    border-radius: 4px;
    transition: opacity linear 0.3s;
}
.layui-btn-primary {
    border: 1px solid #c9c9c9;

    &:hover {
        border: 1px solid #bbb;
    }
}
.layui-btn-normal,
a.layui-btn-normal {
    background-color: #6e6ef1;
    color: #fff;
}
.layui-btn-danger,
a.layui-btn-danger {
    background-color: $forbiddenColor;
    color: #fff;
}
.layui-btn-green,
a.layui-btn-green {
    background-color: $successColor;
    color: #fff;
}
.layui-btn-yellow,
a.layui-btn-yellow {
    background-color: $warnColor;
    color: #fff;
}

.tablesorter-blue tr {
    content-visibility: auto;
}
.tablesorter-blue th,
.tablesorter-blue thead td {
    // min-width: 100px;
    vertical-align: middle;
}
.tablesorter-blue td,
.tablesorter-blue tbody td {
    vertical-align: middle;
}
.layui-tab-title a {
    color: inherit;
}
.layui-layer-content {
    // padding: 20px;
}
.layui-layer-page.overflow-visible .layui-layer-content {
    overflow: visible;
}
.layui-table-page select {
    height: 26px;
}
.gui-page-disabled {
    // display: list-item;
}
.layui-laydate-header i:hover,
.layui-laydate-header span:hover {
    color: $themeColor;
}
.layui-laydate-content td.laydate-selected {
    background-color: #bfbff9;
}
.laydate-selected:hover {
    background-color: #bfbff9 !important;
}
.layui-disabled,
.layui-disabled:hover {
    color: #bbb !important;
}
.layui-input:disabled:hover,
.layui-textarea:disabled:hover {
    border-color: rgba(0, 0, 0, 0) !important;
}
.layui-checkbox-disbaled {
    border-color: #f0f0f0 !important;

    em {
        color: #ddd !important;
    }
    i {
        background-color: #f3f3f3;
    }
}
.layui-form-pane {
    .layui-form-label {
        width: 150px;
    }
    
    .layui-form-label-auto {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        border-width: 0;
        border-right-width: 1px;
        border: 1px solid #eee;
    }
}
.layui-form-pane .layui-input-block {
    margin-left: 150px;
}
[lay-search] + .layui-form-select .layui-input {
    cursor: auto;
}
//
.form-cols {
    position: relative;
    display: flex;
    width: 100%;
}

@mixin tableitem {
    table-layout: fixed;

    &.isfluid {
        min-width: 100%;
        width: auto;
        white-space: nowrap;
    }

    &.iswrap {
        th,
        td {
            white-space: nowrap;
        }
    }

    th {
        font-weight: 800;
    }

    th,
    td {
        // padding-left: 0;
        // padding-right: 0;
        // overflow: hidden;
        text-overflow: ellipsis;
        table-layout: fixed;
        position: relative;
        word-break: break-all;
    }

    tfoot {
        background-color: #FAFAFA;
    }

    a.link {
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    a.text {
        display: inline;
        text-overflow: ellipsis;
        width: 100%;
        overflow: hidden;
    }
}

#APP_FRAME {
    // user-select: none;
    min-width: 800px;
    height: 100%;

    * {
        box-sizing: border-box;
    }

    table {
        @include tableitem;
    }
}

.tableitem {
    @include tableitem;
}

.info-mark {
    color: $themeColor;
}
.important-mark {
    color: red;
}
.info,
a.info,
td.info {
    color: $themeColor;
}
button.info {
    background-color: $themeColor;
    color: #fff;
}
.red,
a.red,
td.red {
    color: $forbiddenColor;
}
button.red {
    background-color: $forbiddenColor;
    color: #fff;
}
.forbid {
    color: #898989;
    cursor: not-allowed;
    text-decoration: none;

    &:hover {
        text-decoration: none !important;
    }

    &:link {
        color: #898989;
    }
}
.gary,
a.gary,
td.gary {
    color: #888;
}
button.gary {
    background-color: #888;
    color: #fff;
}
.green,
a.green,
td.green {
    color: $successColor;
}
button.green {
    background-color: $successColor;
    color: #fff;
}
.yellow,
a.yellow,
td.yellow {
    color: $warnColor;
}
button.yellow {
    background-color: $warnColor;
    color: #fff;
}
.blue,
a.blue,
td.blue {
    color: $blueColor;
}
button.blue {
    background-color: $blueColor;
    color: #fff;
}
.layui-form-select {
    width: 100%;
    // padding: 0 10px;
}
.opera a {
    margin: 0 5px;
}
.table-container {

    a {
        margin: 0 5px;

        &:hover {
            text-decoration: underline;
        }

        &.link-disabled {
            &:hover {
                text-decoration: none;
                cursor: auto;
            }
        }
    }
}

a.link:hover {
    text-decoration: underline;
}

.layui-form {
    position: relative;

    .layui-form-select {
        height: 38px;
    }
}

.search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    // margin-top: 0;
    // padding-left: 0;
    // padding-right: 0;
    margin: 0;
    // padding: 0 0 14px;
    padding: 0;
    // height: 66px;
    font-size: 12px;
    background: none;

    &.search-column {
        display: block;
        height: auto;

        & > div {
            margin-bottom: 15px;
        }
    }

    &.search-no-background {
        background-color: initial;
    }

    .search-space {
        white-space: nowrap;
    }

    .search-filter {
        // white-space: nowrap;

        & > span {
            display: inline-block;
            margin: 5px;
        }
    }

    .layui-form-radio {
        margin: 0;
    }

    .layui-input {
    //     width: auto;
    //     transition: none;
        height: 30px;
    //     line-height: 30px;
    //     font-size: 12px;
    }

    .layui-form-select {
        &,
        .layui-input {
            width: 140px;
            height: 30px;
            // display: inline-block;
        }
        //     .layui-edge {
        //         border-width: 5px;
        //     }
    }
    .layui-form-selected .layui-edge {
        margin-top: -9px;
    }

    label span {
        vertical-align: middle;
    }

    .layui-btn + .layui-btn {
        margin-left: 0;
    }

    form {
        display: inline-block;
    }
}
.layui-tab-title {
    width: auto;
    transition: none;

    li {
        transition: none;
    }
}
.menus > a {
    &:not(:first-child) {
        margin-left: 5px;
    }

    &:not(:last-child) {
        margin-right: 5px;
    }
}

.layui-unselect {
    margin-top: 0;
}

.click2file {
    position: relative;
    padding: 0 40px 0 10px;
    line-height: 38px;
    color: #1e88e5;
    text-decoration: underline;
    cursor: pointer;

    span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    &::after {
        content: " ";
        position: absolute;
        right: 0;
        top: 0;
        width: 38px;
        height: 38px;
        // background-image: url();
        background-image: url();
        background-size: 24px;
        background-repeat: no-repeat;
        background-position: center center;
    }
}

.tablesorter-blue {
    user-select: text;
}

.categoryTxt {
    a,
    a:hover {
        color: #1e88e5;
    }

    a.cateParentALL,
    a.cateParentALL:hover,
    a.cateParentA:hover {
        color: #fff;
    }
}

.layui-nav-more {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    margin-top: -3px;
    width: 0;
    height: 0;
    border-top: 6px solid;
    border-bottom: 6px solid rgba(255, 255, 255, 0);
    border-left: 6px solid rgba(255, 255, 255, 0);
    border-right: 6px solid rgba(255, 255, 255, 0);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;

    &.layui-nav-mored {
        margin-top: -9px;
        border-top: 6px solid rgba(255, 255, 255, 0);
        border-bottom: 6px solid;
    }
}

.layui-form-item .layui-input-inline {
    width: 350px;
}

.search .layui-input-inline {
    // margin-left: 5px;
    margin: 7px 10px 7px 0;

    & .layui-input-inline {
        margin: 0;
    }

    &:first-child {
        margin-left: 0;
    }

    &:last-child {
        margin-right: 0;
    }
}

.layui-textarea,
textarea {
    resize: none;
}

.layui-form-item {
    position: relative;
    margin-top: 15px;
    margin-bottom: 0;

    &:not(:first-child) {
        margin-top: 15px;
    }
}

.form-tips {
    box-sizing: border-box;
    display: inline-block;
    padding: 9px 0 9px 165px;
    width: 100%;
    line-height: 20px;
    color: #999;

    &:empty {
        display: none;
    }
}

input.layui-input.layui-unselect::placeholder {
    color: #757575;
}

.layui-inputrange {
    border: 1px solid #eee;

    .layui-input {
        border: none;
        height: $formlineHeight;
    }

    .layui-inputrange {
        border: none;
    }
}

.async-input-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    cursor: pointer;
    line-height: $formlineHeight;

    .normal-icon {
        position: absolute;
        right: 10px;
        top: 50%;
        margin-top: -3px;
        cursor: pointer;
        border-width: 6px;
        border-top-color: #c2c2c2;
        border-top-style: solid;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
    }

    .loading-icon {
        font-size: 1.4em;
        line-height: $formlineHeight;
        position: absolute;
        right: 10px;
        color: #c2c2c2;
    }
}

.pointer {
    cursor: pointer;
}

.layui-form-radio:hover *,
.layui-form-radioed,
.layui-form-radioed > i {
    color: #5d5def;
}

.layui-menu li {
    text-align: center;
}

.subCrumbs {
    display: flex;
    align-items: center;
    justify-content: start;

    span,
    i {
        padding: 0;
    }

    .intro::after {
        content: ": ";
        margin-right: 6px;
    }

    span:not(:empty) {
        &:not(:first-of-type)::before {
            content: "/";
            margin: 0 6px;
            vertical-align: middle;
        }
    }
}

.mask-pointer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.flex-space {
    display: flex;
    justify-content: space-between;
}

@mixin scrollbar {
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #888;
    }

    ::-webkit-scrollbar-resizer {
        background-color: #ff6e00;
    }
}

.layui-anim {
    @include scrollbar;
}

.layui-laydate .layui-laydate-main:not(.laydate-time-show) {
    .layui-icon.laydate-icon.laydate-next-m,
    .layui-icon.laydate-icon.laydate-next-y,
    .layui-icon.laydate-icon.laydate-prev-y,
    .layui-icon.laydate-icon.laydate-prev-m {
        display: inline-block !important;
    }
}
a.cateParentALL:hover {
    color: #ffffff;
}

.sub-title {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 800;
}

.title {
    font-size: 18px;
    font-weight: 800;
}

.sub-remark {
    margin-bottom: 20px;
}

.layui-input-block-text {
    align-items: center;
    padding: 0 10px;
}

.layui-laydate-content td.laydate-now:after {
    border-color: $themeColor;
}

.layui-laydate-content td.laydate-now {
    color: $themeColor;
}

.layui-btn-carry {
    display: flex;
    border-radius: 4px;
    overflow: hidden;
    padding: 0;

    &:hover {
        opacity: 1;
    }

    & > button:first-child {
        border-radius: 4px 0 0 4px;
    }

    & > button:not(:first-child) {
        border-left: 1px solid #ccc;
    }

    & > button:last-child {
        border-radius: 0 4px 4px 0;
    }

    .button-menu-control {
        padding: 0 4px 0 0;
    }
}

.button-menu-control {
    padding: 0 6px 0 10px;
    min-width: 0;
    font-size: 14px;
    font-family: layui-icon!important;

    &::after {
        content: "\e625";
        padding-left: 4px;
    }
}

.layui-btn-carry-menu {
    .layui-dropdown-menu {
        margin: 0;
        border-radius: 4px;
        overflow: hidden;

        li {
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            border: none;
            margin: 0;
        }
    }

    & li:hover {
        background-color: #6e6ef1;
        color: #fff;
    }

    &-green li:hover {
        background-color: $successColor;
        color: #fff;
    }
}

.formlink {
    line-height: 36px;
    word-break: break-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.recipient-list {
    li {
        position: relative;
        font-size: 14px;
        padding-bottom: 3px;
        padding: 5px 10px;
        border-radius: 4px;
        color: #a5a5a5;

        .checkedboxp {
            visibility: hidden;
        }

        &.hoverselect:hover {
            background-color: #f0f0f0;
            transition: background-color linear 0.1s;

            .checkedboxp {
                visibility: visible;
            }
        }
    }
}

.toDown {
    transform: rotate(90deg);
}

.grade-name {
    width: 80%;
    flex: 1;
    word-break: break-all;
}

.fa-caret-right {
    margin-right: 5px;
}

.checkedboxp {
    position: absolute;
    right: 10px;
    top: 5px;
    width: 50px;
    text-align: right;
}

.tablesorter-blue tbody td, .tablesorter-blue tfoot th, .tablesorter-blue tfoot td {
    padding: 9px 8px;
    line-height: 18px;
}

.gui-page-item {
    vertical-align: middle;
    display: inline-block;
    float: none;
}

#table_page {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.gui-page {
    i, a {
        line-height: 26px;
    }
}

.gui-page-total {
    height: 28px;
    line-height: 28px;
}

.gui-page-total,
.gui-page-item-jump-next, .gui-page-item-jump-prev, .gui-page-next, .gui-page-prev {
    vertical-align: middle;
    float: none;
    display: inline-block;
}

.gui-input.page-local {
    padding-left: 0;
    text-align: center;
}

#APP_FRAME {
    .gui-page-item-active {
        border: 1px solid #5d5def;
    }
}

.header-tips {
    margin-left: 5px;
    padding: 4px;
    color: #888;
    cursor: pointer;
}

.layui-input-block {
    display: flex;
    flex-wrap: wrap;

    &.layui-input-block-nowrap {
        flex-wrap: nowrap;
    }

    .label-checkbox, .label-radio {
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

.form-link {
    line-height: 38px;
    color: #aaa;

    &:not(:empty) {
        padding: 0 10px;
    }

    &:empty::before {
        content: attr(data-empty-tips);
        padding: 0 10px;
        color: #999;
    }
}

.multiline {
    .layui-form-label {
        white-space: normal;
    }

    .layui-input-block {
        height: 100%;
        align-items: center;
    }

    .layui-form-switch {
        margin-top: 0;
    }

    .layui-form-checkbox[lay-skin=primary] {
        margin-top: 0;
        margin-bottom: 0;
        height: fit-content !important;
    }
}

.table-selected-count {
    display: none;
    margin-right: 10px;
    vertical-align: middle;

    &:not(:empty) {
        display: inline-block;

        &::before {
            content: '已选';
            padding-right: 5px;
        }
    
        &::after {
            content: '个';
            padding-left: 5px;
        }
    }
}

.table-selected-cancel {
    border: none;
    vertical-align: middle;
}

// .tips:not([tips=""]) {
//     position: relative;

//     &::after {
//         content: attr(tips);
//         position: absolute;
//         bottom: 30px;
//         left: 50%;
//         z-index: 1;
//         transform: translateX(-50%);
//         visibility: hidden;
//         opacity: 0;
//         display: inline-block;
//         width: max-content;
//         max-width: 200px;
//         padding: 6px 10px;
//         color: #fff;
//         background: #666;
//         border-radius: 4px;
//         transition: opacity linear 0.15s;
//         white-space: normal;
//         font-size: 14px;
//         font-weight: normal;
//         line-height: 20px;
//     }

//     &:hover::after {
//         visibility: visible;
//         opacity: 1;
//     }

//     &::before {
//         content: '';
//         position: absolute;
//         bottom: 18px;
//         left: 50%;
//         z-index: 1;
//         border: 6px solid transparent;
//         border-top-color: #666;
//         transform: translateX(-50%);
//         visibility: hidden;
//         opacity: 0;
//         transition: opacity linear 0.15s;
//     }

//     &:hover::before {
//         visibility: visible;
//         opacity: 1;
//     }
// }